<template>
  <div class="box">
    <h2>基本信息</h2>
    <div class="bg">
      <el-row>
        <el-col :span="7">
          <p>订单编号：{{ details.id }}</p>
          <p>兑换时间：{{ details.createTime }}</p>
        </el-col>
        <el-col :span="5">
          <p>
            订单状态：{{ details.orderStatus | fliterStatus(orderOptions) }}
          </p>
        </el-col>
        <el-col :span="6">
          <p>
            买家姓名：{{ details.accountName || '-' }}-{{
              details.accountPhone
            }}
          </p>
        </el-col>
        <el-col :span="6">
          <p>订单金额：{{ details.coinsCount }}金币</p>
        </el-col>
      </el-row>
    </div>
    <br />
    <br />
    <h2>商品信息</h2>
    <div class="bg">
      <el-row>
        <el-col :span="8">
          <img class="u-img-fm" :src="details.mainPic" alt="" />
        </el-col>
        <el-col :span="8">
          <b class="margin-top30">商品名称：{{ details.goodsName }}</b>
          <p>
            商品数量：×{{ details.goodsCount }}
            <span class="margin-left30"
              >总价格：<b>{{ details.coinsCount }}金币</b></span
            >
          </p>
        </el-col>
        <el-col :span="8">
          <b class="margin-top30">类型：金币兑换商品</b>
        </el-col>
      </el-row>
    </div>
    <br />
    <br />
    <h2>物流信息</h2>
    <div class="bg">
      <el-row>
        <el-col :span="7">
          <p>收货人：{{ details.userName }}</p>
          <p>
            物流单号：{{ details.logisticsOrderNo || '暂无'
            }}<a
              class="margin-left10"
              @click="edit(details.logisticsOrderNo, 1)"
              >编辑</a
            >
          </p>
        </el-col>
        <el-col :span="7">
          <p>联系方式：{{ details.userPhone }}</p>
          <p>
            物流公司：{{ details.logisticsCompany || '暂无'
            }}<a
              class="margin-left10"
              @click="edit(details.logisticsCompany, 2)"
              >编辑</a
            >
          </p>
        </el-col>
        <el-col :span="10">
          <p>收货地址：{{ details.recvAddress }}</p>
          <b
            >物流状态：{{ details.orderStatus == 2 ? '已发货' : '-'
            }}<a class="margin-left10"></a
          ></b>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="编辑"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="500px"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item :label="type == 1 ? '物流单号' : '物流公司'" prop="value">
          <el-input
            v-model="form.value"
            :placeholder="type == 1 ? '请输入物流单号' : '请输入物流公司'"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取消</el-button>
        <el-button
          type="primary"
          @click="dataFormSubmit"
          size="small"
          v-preventReClick
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getIntegralOrderDetails,
  editlogisticCompany,
  editlogisticNumber
} from '@/api/order.js'
import _ from 'underscore'
export default {
  data () {
    return {
      details: {},
      orderOptions: [
        // {label:'未付金币',value:0},
        { label: '已付款', value: 1 },
        { label: '已发货', value: 2 }
        // {label:'收货',value:3},
        // {label:'退款中',value:4},
        // {label:'退款完成',value:5},
        // {label:'交易完成',value:6},
      ],
      form: {
        value: ''
      },
      message: '',
      visible: false,
      title: '',
      type: '',
      rules: {
        value: [{ required: true, message: '请输入物流信息', trigger: 'blur' }]
      }
    }
  },
  activated () {
    this.getIntegralOrderDetails()
  },
  filters: {
    fliterStatus (value, data) {
      let res = _.filter(data, function (item) {
        return item.value === value
      })
      if (res.length) {
        return res[0].label
      } else {
        return ''
      }
    }
  },
  methods: {
    async getIntegralOrderDetails () {
      let res = await getIntegralOrderDetails({
        order_number: this.$route.query.order_id
      })
      if (res[0]) {
        return
      }
      if (res[1].code == 0) {
        this.details = res[1].orderDetail
      }
    },
    edit (val, type) {
      this.type = type
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.form.value = val
    },
    dataFormSubmit () {
      this.$refs['form'].validate(async valid => {
        if (valid) {
          let params = {
            id: this.$route.query.order_id,
            logisticsOrderNo: this.form.value,
            logisticsCompany: this.form.value
          }
          if (this.type == 1) {
            delete params.logisticsCompany
          } else {
            delete params.logisticsOrderNo
          }
          let res =
            this.type == 1
              ? await editlogisticNumber(params)
              : await editlogisticCompany(params)
          if (res[0]) {
            return
          }
          if (res[1].code == 0) {
            this.$message.success('编辑物流信息成功！')
            this.visible = false
            this.getIntegralOrderDetails()
          }
        }
      })
    }
  }
}
</script>
<style scoped>
.bg {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 10px 30px;
}
.u-img-fm {
  width: 200px;
  height: 200px;
}
b {
  display: inline-block;
}
</style>
